<template>
    <XiaDanHeaderComzxw></XiaDanHeaderComzxw>
    <ZhiDeNavljj>
    </ZhiDeNavljj>
    <div class="tubiao">
        <ul>
            <li v-for="item of abc" :key="item.id">
                <img :src="item.imgUrl" alt="">
                <p class="wenzi">{{item.title}}</p>
                <p class="small">{{item.name}}</p>
            </li>
        </ul>
    </div>
    <ZhiDeListljj></ZhiDeListljj>

</template>

<script>
    import XiaDanHeaderComzxw from "../components/XiaDan/XiaDanHeaderComzxw.vue";
    import ZhiDeNavljj from "../components/Zhidemai/ZhiDeNavljj.vue";
    import {getBanner} from "../api";
    import ZhiDeListljj from "../components/Zhidemai/ZhiDeListljj.vue";
    export default {
        name: "ZhiDeMaiView",
        components: {
            XiaDanHeaderComzxw, ZhiDeNavljj,ZhiDeListljj
        },
        data() {
            return {
                abc: [],
                efg:[]
            }
        }, mounted() {
            getBanner('/zhidemai-nav')
                .then(response => {
                    this.abc = response.data
                })
        },
        beforeRouteEnter(to, from, next) {
            window.document.body.style.backgroundColor = "#f4f4f4";
            next();
        },
        beforeRouteLeave(to, from, next) {
            window.document.body.style.backgroundColor = "";
            next();
        },
        // }, beforeCreate() {
        //     this.$nextTick(() => {
        //         document.querySelector('body').setAttribute('style', 'background-color:#f4f4f4;')
        //     })
        // },
        // beforeDestroy() {
        //     document.body.removeAttribute('style')

    }
</script>
<style scoped>
    .tubiao {
        width: 98%;
        height: 250px;
        overflow: scroll;
        background: white;
        margin-top: -180px;
        border-radius: 18px;
        margin-left: 4.8px;
    }
    img {
        width: 60px;
    }
    .tubiao>ul {
        width: 686px;
        height: 100%;
        margin: 0 auto;
        /*line-height: 25px;*/
        text-align: center;
    }
    div>ul>li {
        width: 90px;
        float: left;
        margin-right: 8px;
        margin-top: 10px;
    }
    .wenzi {
        font-weight: bold;
        font-size: 14px;
    }
    .small{
        font-size: 12px;
    }
</style>